/**
 * @Description:云卡已开通状态的卡面实例
 * @author tao.xie
 * @date $
 */

import React, { Component } from 'react'
import { Dimensions, StyleSheet, Text, TouchableHighlight, TouchableOpacity, View } from 'react-native'
import QRCode from 'react-native-qrcode'
import { px2dp ,showToast } from 'rn-xiaobu-utils'
import { getQRCode } from '../../../api/CardInfoApi'
import CardFace from '../CardFace'
import QRCodeDefault from '../QRCodeDefault'

/**
 * 二维码刷新额时间
 * @type {number}
 */
const
  QRCODE_INTERVAL_TIME = 60 * 1000

export default class CardOpenedModule extends Component {
  componentWillUnmount (): void {
    this._removeTimer()
  }

  _removeTimer = () => {
    this.timer && clearInterval(this.timer)
  }

  constructor (props) {
    super(props)
    this.timer = null
    this.state = {
      code: '',
      isOnScreen: false,
      balance: this.props.cardinfo.amount,
      canRecharge: true
    }

    this.cardno = this.props.cardinfo.cardNo
  }

  isOnScreen = (isOnScreen) => {
    this.setState({ isOnScreen: isOnScreen })
  }

  _openInterval = () => {
    if (this.timer == null) {
      this.timer = setInterval(() => {
        this._refreshQRCode()
      }, QRCODE_INTERVAL_TIME)
    }
  }

  _getCardInfo = () => {
    return { cardno: this.props.cardinfo.cardNo, cardname: this.props.cardinfo.cardName, state: this.props.cardinfo.state }
  }

  /**
   * 刷新二维码
   * @private
   */
  _refreshQRCode = () => {
    if (this.cardno !== '') {
      getQRCode(this.cardno).then(res => {
        this.setState({
          code: res.CODE,
          balance: res.AMOUNT
        })
      })

    }
  }

  shouldComponentUpdate (nextProps, nextState): boolean {
    if ((nextState.isOnScreen === true) && (this.state.isOnScreen === false)) {
      this._refreshQRCode()
      this._openInterval()
    } else {
      this._removeTimer()
    }
    return true
  }

  _renderCardFace = () => {
    return <CardFace balance={this.state.balance} cardno={this.cardno}
      name={this.props.cardinfo.cardOwner}
      style={styles.face}/>
  }

  render () {
    return (
      <View style={styles.container}>
        <View style={styles.container}>
          {this._renderCardFace()}
          <TouchableHighlight onPress={() => {
            this._refreshQRCode()
          }} style={{ width: px2dp(420), height: px2dp(420) }}>

            {this.state.code === '' ? <QRCodeDefault/> : <QRCode bgColor="#000"
              fgColor="#fff"
              size={px2dp(420)}
              value={this.state.code}/>}

          </TouchableHighlight>
          < Text style={styles.tips}>消费码，每分钟自动刷新，限当面使用</Text>
        </View>
        {
          this.state.canRecharge === true
            ? <TouchableOpacity activeOpacity={0.8} onPress={() => {
              showToast('充值操作')
            }}>
              <Text style={styles.recharge}>充值</Text>
            </TouchableOpacity> : null}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    width: Dimensions.get('window').width
  },
  face: {
    marginTop: px2dp(40),
    marginBottom: px2dp(130)
  },

  tips: {
    color: '#999',
    fontSize: px2dp(24),
    lineHeight: px2dp(33),
    marginTop: px2dp(30)
  },
  recharge: {
    backgroundColor: '#28ACFF',
    color: '#fff',
    width: px2dp(600),
    height: px2dp(80),
    fontSize: px2dp(30),
    lineHeight: px2dp(80),
    textAlign: 'center',
    borderRadius: px2dp(10),
    marginBottom: px2dp(60)
  }
})
